<template>
  <div class="home-banner">
    <van-swipe class="home-swiper" :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts" setup>
// 导入发送请求的方法
import { getBannerList } from '@/apis/banner'
import { onMounted, ref } from 'vue'

interface Banners {
  img: string
  bannerid: string
}

// 准备一个变量表示轮播图列表
const bannerList = ref<Banners[]>([])

// 发送请求请求轮播图数据
onMounted(async () => {
  const res = await getBannerList()
  bannerList.value = res.data
})
</script>

<style scoped lang="scss">
.home-banner {
  width: 100%;
  height: 190px;
  position: relative;

  &::before {
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    left: 0;
    top: -80px;
    background-color: #C82519;
    border-radius: 0 0 200px 200px / 0 0 30px 30px;
    box-sizing: border-box;
    padding: 10px;
    z-index: -1;
  }

  > .home-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
</style>
